<template>
	<view class="perfect">
		<view class="header_title">继续完善资料</view>

		<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
			<view class="img_box">
				<!--  -->
				<img class="w100 h100" :src="avatarUrl == '' ? 'https://sz.vvv5g.com/assets/addons/wanlshop/img/common/img_default3x.png' : avatarUrl" alt="" />
			</view>
		</button>

		<input class="ipt" type="nickname" v-model="userName" placeholder="请输入用户名" />
		<view class="zc" @click="zhuCe">完成注册</view>
		<uni-popup ref="popup" type="center" :animation="true">
			<view class="pop_box">
				<view class="view_img_box">
					<img class="w100 h100" src="@/static/img_default3x.png" alt="" />
				</view>
				<view class="txt txtali s26 f500 family">亲，首次登录系统，需要获取您的昵称、头像进一步完善资料！</view>
				<view class="btn s30 f500 family txtali" @click="onLogin">确认授权</view>
				<view class="btn_two s30 f500 family txtali" @click="close">拒绝</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			userName: '',
			avatarUrl: '',
			thirdId: '',
			gender: 0
		};
	},
	onLoad(option) {
		this.thirdId = option.thirdId;
		this.$refs.popup.open('center');
	},
	methods: {
		//选择头像
		chooseavatar(e) {
			uni.uploadFile({
				url: 'https://sz.vvv5g.com/api/common/upload',
				name: 'file',
				header: {
					'Content-Type': 'application/json'
					// 'token': ''
				},
				filePath: e.detail.avatarUrl,
				formData: {
					user: 'test'
				},
				success: (ures) => {
					let dres = JSON.parse(ures.data);
					this.avatarUrl = dres.data.fullurl;
				},
				fail(e) {
					uni.hideLoading();
				}
			});
		},
		onLogin() {
			let that = this;
			this.$refs.popup.close('center');
		},
		zhuCe() {
			console.log(this.userName);
			if (this.avatarUrl == '') {
				uni.showToast({
					title: '请上传头像',
					icon: 'none'
				});
				return;
			}
			if (this.userName == '') {
				uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				});
				return;
			}
			let that = this;
			that
				.$request({
					url: 'user/perfect',
					method: 'POST',
					data: {
						third_id: that.thirdId,
						avatarUrl: that.avatarUrl,
						nickName: that.userName,
						gender: that.gender
					}
				})
				.then((res) => {
					if (res.data.data == null) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						// 没有绑定手机号
						uni.setStorageSync('tempUserInfo', res.data.data.userinfo);
						uni.navigateTo({
							url: '/pages/user/bindPhone?backPageNum=' + 3
						});
					}
				});
		},
		close() {
			uni.navigateBack({});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 重置按钮样式 */
button {
	background: unset;
	padding: unset;
	margin: unset;
	line-height: unset;
	font-size: unset;
	border-radius: unset;
	text-align: unset;
}
button::after {
	border: unset;
}
.button-hover {
	color: unset;
	background: unset;
}
.perfect {
	overflow: hidden;
	padding-left: 60upx;

	.pop_box {
		width: 750upx;
		height: 1450upx;
		background-color: #ffffff;
		overflow: hidden;

		.view_img_box {
			overflow: hidden;
			height: 200upx;
			width: 200upx;
			border-radius: 50%;
			margin: 250upx auto;
			margin-bottom: 0;
		}

		.txt {
			width: 370upx;
			margin: 60upx auto;
		}

		.btn {
			width: 530upx;
			height: 90upx;
			line-height: 90upx;
			margin: 0 auto;
			background: #ebbe87;
			border-radius: 16upx;
			color: #ffffff;
		}

		.btn_two {
			width: 530upx;
			height: 90upx;
			line-height: 90upx;
			margin: 30upx auto;
			background: #f0f0f0;
			border-radius: 16upx;
			color: #333333;
		}
	}

	.header_title {
		margin-top: 170upx;
		font-size: 64upx;
	}

	.img_box {
		overflow: hidden;
		height: 200upx;
		width: 200upx;
		border-radius: 50%;
		margin: 100upx 30%;
	}

	.ipt {
		width: 604rpx;
		height: 88rpx;
		background: #f1f1f1;
		border-radius: 16upx;
		margin-top: 180upx;
		padding-left: 32rpx;
	}

	.zc {
		width: 604rpx;
		height: 88rpx;
		background: #ebbe87;
		border-radius: 16upx;
		padding-left: 32rpx;
		line-height: 88upx;
		text-align: center;
		color: #ffffff;
		margin-top: 50upx;
	}
}
</style>
